<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Basic Page with chinese</title>
	<link rel="stylesheet" type="text/css" href="example_project_cna.css">
</head>
<body>
	<div id="page-wrapper">
		<header>
			<h1 id="big_header">完全征服网页编程</h1>
			<h2 id="small_header">建国大学计算机工学科</h2>
		</header>

		<nav>
			<div class="pull-left">
				<ul class="outer-menu">
					<li class="outer-menu-item">HTML5</li>
					<li class="outer-menu-item">CSS3</li>
					<li class="outer-menu-item">JavaScript</li>
				</ul>
			</div>
			<div class="pull-right">
				<form>
					<input stype="text" name="text" class="input-search" placeholder="请输入搜索内容">
					<input type="submit" name="submit" class="input-search-submit" value="搜索">
				</form>
			</div>	
		</nav>

		<section>
			<article>
				<div class="article-header">
					<h1 class="article-title">HTML5概要与活用</h1>
					<p class="article-date">2024年12月31号</p>
				</div>
				<div class="article-body">
					<img src="https://via.placeholder.com/430x280">	
					<p>第一个例子</p>
				</div>
			</article>
			<article>
				<div class="article-header">
					<h1 class="article-title">HTML5应用与实操</h1>
					<p class="article-date">2024年12月31号</p>
				</div>
				<div class="article-body">
					<img src="https://via.placeholder.com/430x280">	
					<p>第二个例子</p>
				</div>
			</article>
		</section>

		<aside>
			<div class="aside-list">
				<h3>栏目</h3>
				<ul>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
				</ul>
				<h3>最近的文章</h3>
				<ul	>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
					<li><a href="#">空的内容链接</a></li>
				</ul>
			</div>
		</aside>

		<footer>
			<a href="#">Created by LX</a>
		</footer>
	</div>
</body>
</html>